<template>
  <section class="role-item">
    <div class="role-header ">
      <span class="iconfont icon-30jiantouxiangxiafill  " style="font-size: 12px;float: right;"/>
      <span class="title">超级管理员</span>
      <!--<div class="buttons">-->
        <!--<el-checkbox>启用</el-checkbox>-->
      <!--</div>-->
    </div>
    <div class="role-content">
      <Resource/>
      <Resource/>
      <Resource/>
      <Resource/>
    </div>
  </section>
</template>

<script>
import Resource from './Resource'
export default {
  components: {
    Resource
  }
}
</script>

<style scoped>
  .role-item{
    border-bottom: 1px solid #E4E7ED;
  }
  .role-item:last-child{
    border-bottom: 0px;
  }
  .role-item .role-header{
    padding: 10px 8px;
    cursor: pointer;
  }
  .role-item .role-content{
    display: block;
  }
  .role-item.active .role-header{
    background: #FAC400;
  }
  .role-item.active .role-content{
    display: block;
  }
  .role-header .title{
    color: #01020a;
  }
  .buttons{
    float: right;
    margin-right: 25px;
  }

</style>
